<template>
    <a-modal
            title="添加房型"
            :visible="addRoomTypeVisible"
            @ok="handleOk"
            @cancel="handleCancel">
        <a-form :form="form">
            <a-form-item v-bind="formItemLayout" label="房间类型">
                <a-select default-value="BigBed" style="width: 120px"
                          v-decorator="[
                        'roomType',
                        { rules: [{required: true,message: '请输入房型' }] }
                    ]">
                    <a-select-option value="BigBed">
                        大床房
                    </a-select-option>
                    <a-select-option value="DoubleBed">
                        双床房
                    </a-select-option>
                    <a-select-option value="Family" >
                        家庭房
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item v-bind="formItemLayout" label="房间单价">
                <a-input-number
                        :min="0"
                        ref="newValue"
                        :parser="value => value.replace(/\￥\s?|(,*)/g, '')"
                        :formatter="value => `￥${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                        v-decorator="[
                        'newValue',
                        { rules: [{required: true,message: '请输入金额' }] }
                    ]"
                />
            </a-form-item >

        </a-form>
    </a-modal>
</template>

<script>

    import {mapActions, mapGetters, mapMutations} from "vuex";


    export default {
        name: "addRoomTypeModel",
        props:['hotelId'],
        data(){
            return {
                formItemLayout: {
                    labelCol: {
                        xs: { span: 12 },
                        sm: { span: 6 },
                    },
                    wrapperCol: {
                        xs: { span: 24 },
                        sm: { span: 16 },
                    },
                },
            }
        },

        computed:{
            ...mapGetters([
                'addRoomTypeVisible'
            ])
        },
        methods:{
            ...mapMutations([
                'set_addRoomTypeVisible'
            ]),
            ...mapActions([
                'addRoomType'
            ]),
            handleOk(){

                let price = this.form.getFieldValue('newValue');
                let hotelId = this.hotelId;
                let roomType = this.form.getFieldValue('roomType');
                let data={
                    price:price,
                    hotelId:hotelId,
                    roomType:roomType
                }
                this.addRoomType(data);
                this.set_addRoomTypeVisible(false);
            },
            handleCancel(){
                this.set_addRoomTypeVisible(false);
            },

        },
        beforeCreate() {
            this.form = this.$form.createForm(this, { name: 'addRoomTypeModel' });
        },
    }
</script>

<style scoped>

</style>